<template>
    <view class="content">
		<!-- 抽奖信息 -->
		<view class="draw-info">
			<view class="left">
				<text class="text">抽奖券</text>
				<image class="icon" src="@/static/images/icon/draw-coupon.png"></image>
				<text class="text">×{{ stepUserInfo.voucherCount || 0 }}</text>
			</view>
			<view class="right" @tap="loginOrExchange()">
				{{ token ? '兑换' : '登录' }}
				<text class="iconfont icon-xiayiye"></text>
			</view>
		</view>
		<!-- 抽奖规则 -->
		<view class="draw-rules" @tap="$refs.rulesPopup.open()">玩法与规则</view>
		<!-- 抽奖列表 -->
        <view class="draw-list">
			<view class="draw-item" v-for="(item, index) in tabList[active].list" :key="item.id" @tap="toDrawDetail(item)">
				<view class="img-box">
					<image class="image" mode="widthFix" :src="item.pic.split(',')[0]"></image>
				</view>
				<view class="content">
					<view class="title">奖品：{{ item.name }}×{{ item.num }}</view>
					<view class="supplier">{{ item.providerName }} 赞助</view>
					<view class="condition">
						<text class="text" v-if="item.type === 1">满{{ item.userCount }}人 自动开奖</text>
						<text class="text" v-if="item.type === 2">{{ item.endTime }} 自动开奖</text>
					</view>
				</view>
			</view>

            <!-- 商品骨架 -->
            <template v-for="i in ['a', 'b', 'c', 'd']">
                <view class="skeleton-wrap" v-if="
					tabList[active].list.length === 0 &&
					!tabList[active].finished &&
					!tabList[active].empty">
                    <skeleton class="goods-skeleton" :loading="true" avatarShape="square" :row="4" avatarSize="254rpx"></skeleton>
                </view>
            </template>
        </view>

        <!-- 加载中插件 -->
        <view class="load-status">
            <load-more status="loading" color="#c6c6c6" iconType="circle" v-if="!tabList[active].finished && !tabList[active].empty"
                       :contentText="contentText"></load-more>
            <load-more status="noMore" color="#c6c6c6" v-if="tabList[active].finished" :contentText="contentText"></load-more>
            <empty v-if="tabList[active].empty"></empty>
        </view>
        <!-- 回到顶部 -->
        <view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
            <text class="iconfont icon-huidaodingbu"></text>
        </view>

		<!-- 活动规则 -->
		<popup ref="rulesPopup" @touchmove.stop.prevent>
			<view class="rules-popup">
				<text class="iconfont icon-guanbi" @tap="$refs.rulesPopup.close()"></text>
				<view class="rules-title">
					<view class="text">抽奖规则</view>
					<view class="line"></view>
				</view>
				<view class="rules-content" @touchmove.stop.prevent>
					<text class="text" v-for="item in shareTemplate" :class="[{ bottom: item === '' }]">{{ item }}</text>
				</view>
			</view>
		</popup>

		<!-- 快捷登录 -->
		<authorize ref="authorize" @authorizeSuccess="refresh"></authorize>
    </view>
</template>

<script>
	import { mapGetters } from 'vuex';
    import Empty from "@/components/Empty";
	import Authorize from '@/components/Authorize';
    import Skeleton from '@/components/uni/Skeleton';
    import LoadMore from "@/components/uni/LoadMore";
    import Popup from '@/components/uni/Popup';
    import loader from '@/utils/mixin/loader';
    export default {
        name: "draw",
        mixins: [loader],
        components: {
            Empty,
			Authorize,
            LoadMore,
            Skeleton,
            Popup
        },
		data() {
			return {
				token: null,
				shareTemplate: []
			}
		},
        onLoad() {
            this.initPage();
			
			this.$service.common.shareTemplate.list({
				type: 18
			}).then(res => {
				this.shareTemplate = res[0].split(' ');
			});

			uni.reportAnalytics('enter_choujiang', {
				enter_choujiang: 1
			});
        },
		onShow() {
			if (uni.getStorageSync('stepToken')) {
				this.$store.dispatch('getStepUserInfo');
				this.token = uni.getStorageSync('stepToken');
			} else {
				this.token = null;
			}
			this.$store.dispatch('addVisitRecordUnAuthorized', { pageType : 13 });
		},
		computed: {
			...mapGetters(['stepUserInfo',])
		},
        methods: {
            initPage() {
                uni.showLoading({
                    title: '加载中...'
                });
                this.loadMore(this.tabList[0]);
            },
            beforeLoader() {
                this.service = this.$service.activity.lotteryActivity.page({
					order: 'level',
					sort: 'desc'
				});
                return true;
            },
			loginOrExchange() {
				if (!uni.getStorageSync('stepToken')) {
					this.$refs.authorize.open();
					return false;
				}
				uni.navigateTo({
					url: '/pages/draw/coupon'
				});

				uni.reportAnalytics('click_duihuan', {
					click_duihuan: 1
				});
			},
			refresh() {
				this.$store.dispatch('getStepUserInfo');
			},
			toDrawDetail(item) {
				if (!uni.getStorageSync('stepToken')) {
					this.$refs.authorize.open();
					return false;
				}
				
				if (Number(this.stepUserInfo.voucherCount) === 0) {
					uni.showModal({
						content: '您的抽奖券为0，前往兑换抽奖券？',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/draw/coupon'
								});
							} else {
								uni.navigateTo({
									url: '/pages/draw/detail?id=' + item.id
								});
							}
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/draw/detail?id=' + item.id
					});
				}

				uni.reportAnalytics('click_jiangpinkp', {
					click_jiangpinkp: 1
				});
			}
        }
    }
</script>

<style lang="scss" scoped>
    .content {
		.draw-info {
			color: #4BA1FE;
			padding: 24rpx 36rpx 0 36rpx;
			font-size: 32rpx;
			@include flexBox(space-between, center);
			.left {
				@include flexBox(center, center);
				.icon {
					width: 29rpx;
					height: 24rpx;
					margin: 0 12rpx;
				}
			}
			.right {
				@include flexBox(center, center);
			}
		}
		.draw-rules {
			width: 158rpx;
			line-height: 60rpx;
			background: linear-gradient(327deg, #4BA1FE 0%, #89BEF6 100%);
			border-radius: 50rpx 0px 0px 50rpx;
			color: #fff;
			font-size: 26rpx;
			text-align: center;
			position: fixed;
			right: 0;
			top: 108rpx;
			z-index: 100;
		}
		.draw-list {
			width: 708rpx;
			margin: 0 auto;
			.draw-item {
				padding: 16rpx 16rpx 24rpx;
				border-radius: 16rpx;
				background: #fff;
				margin-top: 24rpx;
				.img-box {
					width: 676rpx;
					height: 300rpx;
					border-radius: 8rpx;
					overflow: hidden;
					@include flexBox(center, center);
					.image {
						width: 676rpx;
					}
				}
				.title {
					color: #333333;
					font-size: 32rpx;
					margin-top: 20rpx;
				}
				.supplier {
					color: #FF4747;
					font-size: 28rpx;
					margin: 8rpx 0;
				}
				.condition {
					color: #7A7A7A;
					font-size: 28rpx;
				}
			}
		}
        .skeleton-wrap {
            background: #fff;
            width: 704rpx;
            margin: 0 auto;
            margin-top: 20rpx;
            border-radius: 16rpx;
        }
		.rules-popup {
			width: 550rpx;
			background: #fff;
			padding: 40rpx 30rpx;
			border-radius: 16rpx;
			position: relative;
			font-size: 24rpx;
			min-height: 300rpx;
			background: linear-gradient(180deg, #F3F9FF 0%, #FFFFFF 100%);
			.icon-guanbi {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				color: #000;
				font-size: 34rpx;
			}
			.rules-title {
				color: #333333;
				font-size: 36rpx;
				text-align: center;
				font-weight: 600;
				margin-bottom: 20rpx;
				.line {
					background: #439DFF;
					width: 92rpx;
					height: 14rpx;
					border-radius: 50rpx;
					margin: -14rpx auto 0;
				}
			}
			.rules-content {
				font-size: 26rpx;
				max-height: 600rpx;
				overflow: auto;
				@include flexBox(null, null ,column);
				.bottom {
					margin-bottom: 16rpx;
				}
			}
		}
    }
</style>